<template>
  <div class="order-desc">
    <el-row type="flex"
            align="middle"
            style="padding-left: 20px;margin-top: 5px;">
      <el-col :span="2">备注</el-col>
      <el-col :span="20">
        <el-select v-if="showOption"
                   v-model="descOption"
                   placeholder="请选择"
                   clearable
                   @input="handleInput">
          <el-option v-for="item in options"
                     :key="item.label"
                     :label="item.label"
                     :value="item.label">
          </el-option>
        </el-select>
        <span v-else>{{ order.receiptDesc || order.signDesc || '--' }}</span>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "OrderDesc",
  props: {
    order: {
      type: Object,
      default: () => { }
    },
    isAll: [String, Number],
    descOption: String
  },
  data () {
    return {
      options: [
        {
          label: "无延迟"
        }, {
          label: "正常延期"
        }, {
          label: "客户要求"
        }, {
          label: "商务要求"
        }
      ],
    }
  },
  computed: {
    showOption () {
      return [20, '20', 30, '30'].includes(this.$route.query?.status) && !this.isAll;
    }
  },
  methods: {
    handleInput (optionValue) {
      this.$emit("option", optionValue);
    }
  }
}
</script>

<style scoped>
.order-desc {
  padding-bottom: 10px;
}
</style>